<template>
	<view class="box">
		<view class='status-navbar-fixed'></view>
		<loading :status="loadStatus"></loading>
		<set-lang></set-lang>
		<view class="app-logo" v-if="loginStyle == 'text'">
			<view class="tit-bt">{{i18n.register}}</view>
			<view class="tit-ct">{{i18n.welcome}} {{appName}}</view>
		</view>
		<view class="app-logo" v-if="loginStyle == 'img'">
			<image src="../../static/img/indexImg/applogo.png" mode="aspectFill" class='logo-icon'></image>
			<view class="app-tit">{{appName}}</view>
		</view>
		<view class="box-content">
			<view class="title mb-40" v-if="regType=='all'" :class="loginStyle == 'img' ? 'loginImg' : ''">
				<view :class="type == 'mobile' ? 'on' : ''" @tap="type = 'mobile'">{{i18n.phoneReg}}</view>
				<view :class="type == 'email' ? 'on' : ''" @tap="type = 'email'">{{i18n.emailReg}}</view>
			</view>
			<view class="form_ct_list " :class="{focus: focus.input1}">
				<template v-if="type == 'mobile'">
					<!-- <view class="country-code" @tap="link">
						{{country_code}}
					</view> -->
					<input type="number" @blur="focus.input1=false" @focus="focus.input1=true" :placeholder="i18n.enterPhone" class="input"
					 v-model="account" />
				</template>
				<input v-else type="text" @blur="focus.input1=false" @focus="focus.input1=true" :placeholder="i18n.enterEmail" class="input"
				 v-model="account" />
			</view>
			<view class="form_ct_list " :class="{focus: focus.input2}">
				<input :password="flag == true?false:true" :placeholder="i18n.setPass" class="input" v-model="pw" @blur="focus.input2=false"
				 @focus="focus.input2=true" />
				<text class="iconfont" @click="flag = !flag">{{flag == true ? '&#xe648;': '&#xe635;'}}</text>
			</view>
			<view class="form_ct_list " :class="{focus: focus.input3}">
				<input :password="flag2 == true?false:true" :placeholder="i18n.confirmPass" class="input" v-model="repw" @blur="focus.input3=false"
				 @focus="focus.input3=true" />
				<text class="iconfont" @click="flag2 = !flag2">{{flag2 == true ? '&#xe648;': '&#xe635;'}}</text>
			</view>
			<view class="form_ct_list " :class="{focus: focus.input5}">
				<input type="text" maxlength="12" :placeholder="i18n.invitationCode" class="input" v-model="invitateCode" @blur="focus.input5=false"
				 @focus="focus.input5=true" />
			</view>
			<view class="form_ct_list " :class="{focus: focus.input4}">
				<input v-if="type == 'mobile'" type="number" maxlength="6" :placeholder="i18n.smsCode" class="input" v-model="code"
				 @blur="focus.input4=false" @focus="focus.input4=true">
				<input v-else type="number" maxlength="6" :placeholder="i18n.emailCode" class="input" v-model="code" @blur="focus.input4=false"
				 @focus="focus.input4=true">
				<val-code :step='step' @on-send='djs'></val-code>
			</view>

			<view class="mt-60 mb-40">
				<view class="text_tips">{{i18n.regAgree}}
					<view @click="agreementLang" class="link" hover-class="none">{{i18n.protocol}}</view>
				</view>
				<view class="mt-40 mb-40">
					<button class="btn-block" hover-class="btn-hover" :class="lock ? 'disabled' : ''" type="primary" @tap="formSubmit">{{i18n.register}}</button>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="text_tips center">{{i18n.already}}？
					<navigator class="link" url="index" open-type="redirect" hover-class="none">{{i18n.login}}</navigator>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="appdown" @click="godown">{{i18n.downApp}}</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		iosDownload,
		androidDownload,
		regType,
		appName,
		defaultLanguage,
		loginStyle,
		domain
	} from '@/config.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		isPhone,
		isEmail,
		isValPw
	} from '../../utils/val.js'
	import loading from '../../components/loading.vue'
	import valCode from '../../components/valCode.vue'
	import setLang from '../../components/setLang.vue'
	export default {
		data() {
			return {
				appName,
				loginStyle,
				//注册类型
				regType: regType,
				account: '',
				pw: '',
				repw: "",
				invitateCode: '',
				code: '',
				country_id: 35,
				country_code: '0086',
				type: regType == 'email' ? 'email' : 'mobile',
				loadStatus: 'noMore',
				language: '',
				lock: false,
				step: 1,
				focus: {
					input1: false,
					input2: false,
					input3: false,
					input4: false,
					input5: false,
				},
				flag: false,
				flag2: false,
			};
		},
		watch: {
			type() {
				this.account = '',
					this.code = '';
			}
		},
		mounted() {

		},
		components: {
			loading,
			valCode,
			setLang
		},
		onShow() {
			var item = uni.getStorageSync('code');
			if (item) {
				this.country_code = item.area_code;
				this.country_id = item.id;
			} else {
				this.country_code = '0086';
				this.country_id = 35;
			}
		},
		onLoad(option) {
			this.invitateCode = option.code || '';
		},
		computed: {
			i18n() {
				return this.$t('register');
			},
		},
		methods: {
			godown() {
				if (/iPhone/i.test(navigator.userAgent)) {
					if (iosDownload) {
						location.href = iosDownload
					}
				} else {
					if (androidDownload) {
						location.href = androidDownload
					}
				}
			},
			agreementLang() {
				this.lang = uni.getStorageSync('lang') || defaultLanguage
				let domain_name = uni.getStorageSync('available_domain') || domain
				// #ifdef APP-PLUS
				if (this.lang == 'zh-cn') {
					plus.runtime.openWeb(domain_name + 'agreement_cn.html')
				} else if (this.lang == 'en-us') {
					plus.runtime.openWeb(domain_name + 'agreement_en.html')
				}
				// #endif
				//#ifdef H5
				if (this.lang == 'zh-cn') {
					window.open(domain_name + 'agreement_cn.html')
				} else if (this.lang == 'en-us') {
					window.open(domain_name + 'agreement_en.html')
				}
				//#endif
			},
			djs() {
				if (!this.account) {
					this.$toast(this.type == 'mobile' ? this.$t('register.enterPhone') : this.$t('register.enterEmail'));
					return false;
				}
				if (this.type == 'mobile') {
					if (!isPhone(this.account)) {
						this.$toast(this.$t('register.phoneError'));
						return false;
					}
				} else {
					if (!isEmail(this.account)) {
						this.$toast(this.$t('register.emailError'));
						return false;
					}
				}

				let data = {
					account: this.account,
					area_code: this.country_code,
					country: this.country_id,
					type: this.type == 'mobile' ? 'mobile' : 'email'
				}
				this.step = 2;
				this.$post('api/sms/register', data).then(res => {
					this.step = 3;
					this.$toast(res.msg);
				}).catch(res => {
					this.step = 1;
				})
			},
			link() {
				uni.navigateTo({
					url: 'list'
				})
			},
			formSubmit() {
				if (this.lock) return false;
				if (!this.account) {
					this.$toast(this.type == 'mobile' ? this.$t('register.enterPhone') : this.$t('register.enterEmail'));
					return false;
				}
				if (this.type == 'mobile') {
					if (!isPhone(this.account)) {
						this.$toast(this.$t('register.phoneError'));
						return false;
					}
				} else {
					if (!isEmail(this.account)) {
						this.$toast(this.$t('register.emailError'));
						return false;
					}
				}

				if (!this.pw) {
					this.$toast(this.$t('register.enterPass'));
					return false;
				}
				if (!isValPw(this.pw)) {
					this.$toast(this.$t('register.checkPass'));
					return false;
				}
				if (!this.repw) {
					this.$toast(this.$t('register.againPass'));
					return false;
				}
				if (this.pw !== this.repw) {
					this.$toast(this.$t('register.inconsistent'));
					return false;
				}
				if (!this.code) {
					this.$toast(this.type == 'mobile' ? this.$t('register.smsCode') : this.$t('register.emailCode'));
					return false;
				}
				if (this.code.length < 6) {
					this.$toast(this.$t('register.sixCode'));
					return false;
				}

				var data = {
					password: this.pw,
					confirm_password: this.repw,
					account: this.account,
					refer_code: this.invitateCode,
					area_code: this.country_code,
					code: this.code,
				};
				this.lock = true;
				this.loadStatus = 'loading';
				this.$post("api/user/register", data).then(res => {
					uni.setStorageSync('token', res.data.token);
					// this.setLoginState(true)
					// uni.setStorageSync('id', res.data.userinfo.id);
					//关闭当前的登陆页面，进入主页
					this.$toast(res.msg)
					// #ifdef H5
					if (process.env.NODE_ENV === 'development') {
						// 开发环境
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}, 1000);
					} else {
						setTimeout(() => {
							if (/iPhone/i.test(navigator.userAgent)) {
								if (iosDownload) {
									location.href = iosDownload
								}
							} else {
								if (androidDownload) {
									location.href = androidDownload
								}
							}
						}, 1500);
					}
					// #endif
					// #ifdef APP-PLUS
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 1000);
					// #endif
				}).catch(res => {
					this.verify()
					this.captcha = ''
				}).finally(() => {
					this.lock = false;
					this.loadStatus = 'noMore';
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.appdown {
		font-size: 28upx;
		color: var(--theme-color);
		text-decoration: underline;
	}

	.box {
		min-height: 100vh;
		overflow: hidden;
		padding-top: var(--status-bar-height);

		.box-content {
			padding: 0 30upx;

			.title {
				display: flex;
				font-size: 36upx;
				line-height: 1;
				height: 36upx;

				>view {
					position: relative;
					text-align: center;
					font-weight: normal;
					margin-right: 40upx;

					&.on {
						font-weight: bold;
						color: var(--theme-color);
					}
				}
			}

			.loginImg {
				justify-content: center;

				>view {
					width: 40%;
					margin-right: 0;
				}
			}
		}
	}

	.form_ct_list {
		height: 100upx;
		position: relative;
		margin: 30upx 0upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: border-bottom-color .3s ease;
		border-bottom: 1px solid var(--border);

		&.focus {
			border-bottom-color: var(--theme-color)
		}

		.country-code {
			position: relative;
			top: -2px;
			font-size: 28upx;
			line-height: 1;
			margin-right: 20upx;

			&:after {
				content: '';
				display: inline-block;
				position: relative;
				top: 16upx;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 16upx 12upx;
				border-color: #ccc transparent transparent transparent;
				margin-left: 10upx;
			}
		}

		.input {
			flex: 1;
			font-size: 30upx;
			line-height: 1;
			min-height: auto;
		}

		.iconfont {
			color: var(--txt-gray-color);
		}
	}

	.text_tips {
		font-size: 28upx;
		margin: 20upx 0 0;

		.link {
			color: var(--theme-color);
			display: inline-block;
		}
	}

	.center {
		text-align: center;
	}
</style>
